<script setup lang="ts">
import type { PropType } from 'vue'
import type { IMethods, ITableCol, ITableRow } from '@/types'
import { inject } from 'vue'

defineProps({
  colItem: {
    type: Object as PropType<ITableCol>,
    required: true,
  },
  row: {
    type: Object,
    required: true,
  },
})

function handleControlType(type: string | null | undefined = '') {
  let handleType = ''
  if (type === 'input' || type === 'textbox')
    handleType = 'input'
  if (type === 'commonBox')
    handleType = 'select'
  return handleType
}
const methods = inject<IMethods>('methods')
function change(e: string | null, row: ITableRow, col: ITableCol, type: string) {
  if (methods?.change) {
    methods.change(e, row, col, type)
  }
  else {
    console.error('没有配置methods.change方法')
  }
}
</script>

<template>
  <!-- 有组件时处理 部分组件显示数据 -->
  <template v-if="handleControlType(colItem.ControlType)">
    <template v-if="handleControlType(colItem.ControlType) === 'checkbox'">
      <el-tag
        v-if="row[colItem.prop] === 1 || row[colItem.prop] === 'true' || row[colItem.prop] === true || row[colItem.prop] === 'Y'"
        size="small"
      >
        是
      </el-tag>
      <el-tag v-else type="info" size="small">
        否
      </el-tag>
    </template>
    <template v-else-if="handleControlType(colItem.ControlType) === 'ColorPicker'">
      <el-color-picker :value="row[colItem.prop]" size="small" @change="change($event, row, colItem, 'ColorPicker')" />
    </template>
    <template v-else>
      {{ row[colItem.propName ? colItem.propName : colItem.prop] }}
    </template>
  </template>
  <!-- 没有组件 直接显示数据 -->
  <template v-else>
    {{ colItem.prop === 'isChecked' ? null : row[colItem.prop] }}
  </template>
</template>
